<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>编辑预约 - 宠物医院管理系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/style.css" rel="stylesheet">
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <!-- 侧边栏 -->
            <div class="col-md-2 p-0">
                <%@ include file="../common/admin-sidebar.jsp" %>
            </div>

            <!-- 主内容区域 -->
            <div class="col-md-10">
                <div class="main-content p-4">
                    <!-- 页面标题 -->
                    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                        <h1 class="h2">编辑预约</h1>
                        <div class="btn-toolbar mb-2 mb-md-0">
                            <a href="${pageContext.request.contextPath}/appointment/list" class="btn btn-outline-secondary">
                                <i class="fas fa-arrow-left"></i> 返回列表
                            </a>
                        </div>
                    </div>

                    <!-- 错误提示 -->
                    <c:if test="${not empty error}">
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <i class="fas fa-exclamation-circle me-2"></i>${error}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    </c:if>

                    <!-- 编辑表单 -->
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">预约信息</h5>
                        </div>
                        <div class="card-body">
                            <form method="post" action="${pageContext.request.contextPath}/appointment/update" id="editForm">
                                <input type="hidden" name="appointmentId" value="${appointment.appointmentId}">
                                
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="petId" class="form-label">选择宠物 <span class="text-danger">*</span></label>
                                            <select class="form-select" id="petId" name="petId" required>
                                                <option value="">请选择宠物</option>
                                                <c:forEach var="pet" items="${pets}">
                                                    <option value="${pet.petId}" ${appointment.petId == pet.petId ? 'selected' : ''}>
                                                        ${pet.petName} (${pet.petType} - ${pet.owner.realName})
                                                    </option>
                                                </c:forEach>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="serviceType" class="form-label">服务类型 <span class="text-danger">*</span></label>
                                            <select class="form-select" id="serviceType" name="serviceType" required>
                                                <option value="">请选择服务类型</option>
                                                <option value="体检" ${appointment.serviceType == '体检' ? 'selected' : ''}>体检</option>
                                                <option value="疫苗接种" ${appointment.serviceType == '疫苗接种' ? 'selected' : ''}>疫苗接种</option>
                                                <option value="治疗" ${appointment.serviceType == '治疗' ? 'selected' : ''}>治疗</option>
                                                <option value="手术" ${appointment.serviceType == '手术' ? 'selected' : ''}>手术</option>
                                                <option value="美容" ${appointment.serviceType == '美容' ? 'selected' : ''}>美容</option>
                                                <option value="其他" ${appointment.serviceType == '其他' ? 'selected' : ''}>其他</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="appointmentDate" class="form-label">预约日期 <span class="text-danger">*</span></label>
                                            <input type="date" class="form-control" id="appointmentDate" name="appointmentDate" 
                                                   value="${appointment.appointmentDate}" required>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="appointmentTime" class="form-label">预约时间 <span class="text-danger">*</span></label>
                                            <select class="form-select" id="appointmentTime" name="appointmentTime" required>
                                                <option value="">请选择时间</option>
                                                <option value="09:00" ${appointment.appointmentTime == '09:00' ? 'selected' : ''}>09:00</option>
                                                <option value="09:30" ${appointment.appointmentTime == '09:30' ? 'selected' : ''}>09:30</option>
                                                <option value="10:00" ${appointment.appointmentTime == '10:00' ? 'selected' : ''}>10:00</option>
                                                <option value="10:30" ${appointment.appointmentTime == '10:30' ? 'selected' : ''}>10:30</option>
                                                <option value="11:00" ${appointment.appointmentTime == '11:00' ? 'selected' : ''}>11:00</option>
                                                <option value="11:30" ${appointment.appointmentTime == '11:30' ? 'selected' : ''}>11:30</option>
                                                <option value="14:00" ${appointment.appointmentTime == '14:00' ? 'selected' : ''}>14:00</option>
                                                <option value="14:30" ${appointment.appointmentTime == '14:30' ? 'selected' : ''}>14:30</option>
                                                <option value="15:00" ${appointment.appointmentTime == '15:00' ? 'selected' : ''}>15:00</option>
                                                <option value="15:30" ${appointment.appointmentTime == '15:30' ? 'selected' : ''}>15:30</option>
                                                <option value="16:00" ${appointment.appointmentTime == '16:00' ? 'selected' : ''}>16:00</option>
                                                <option value="16:30" ${appointment.appointmentTime == '16:30' ? 'selected' : ''}>16:30</option>
                                                <option value="17:00" ${appointment.appointmentTime == '17:00' ? 'selected' : ''}>17:00</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="doctorName" class="form-label">医生</label>
                                            <input type="text" class="form-control" id="doctorName" name="doctorName" 
                                                   value="${appointment.doctorName}" maxlength="50" placeholder="输入医生姓名">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="status" class="form-label">状态 <span class="text-danger">*</span></label>
                                            <select class="form-select" id="status" name="status" required>
                                                <option value="scheduled" ${appointment.status == 'scheduled' ? 'selected' : ''}>已预约</option>
                                                <option value="confirmed" ${appointment.status == 'confirmed' ? 'selected' : ''}>已确认</option>
                                                <option value="completed" ${appointment.status == 'completed' ? 'selected' : ''}>已完成</option>
                                                <option value="cancelled" ${appointment.status == 'cancelled' ? 'selected' : ''}>已取消</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="mb-3">
                                    <label for="notes" class="form-label">备注</label>
                                    <textarea class="form-control" id="notes" name="notes" rows="4" 
                                              maxlength="500" placeholder="输入预约备注信息...">${appointment.notes}</textarea>
                                    <div class="form-text">最多500个字符</div>
                                </div>

                                <div class="d-flex justify-content-end">
                                    <a href="${pageContext.request.contextPath}/appointment/list" class="btn btn-secondary me-2">
                                        <i class="fas fa-times"></i> 取消
                                    </a>
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fas fa-save"></i> 更新预约
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 表单验证
        document.getElementById('editForm').addEventListener('submit', function(e) {
            const petId = document.getElementById('petId').value;
            const serviceType = document.getElementById('serviceType').value;
            const appointmentDate = document.getElementById('appointmentDate').value;
            const appointmentTime = document.getElementById('appointmentTime').value;
            const status = document.getElementById('status').value;

            // 验证必填字段
            if (!petId) {
                alert('请选择宠物');
                e.preventDefault();
                return;
            }

            if (!serviceType) {
                alert('请选择服务类型');
                e.preventDefault();
                return;
            }

            if (!appointmentDate) {
                alert('请选择预约日期');
                e.preventDefault();
                return;
            }

            if (!appointmentTime) {
                alert('请选择预约时间');
                e.preventDefault();
                return;
            }

            if (!status) {
                alert('请选择状态');
                e.preventDefault();
                return;
            }
        });
    </script>
</body>
</html>
